import React, {Component} from 'react';
import './Ques_temp.css';
import {Button, Modal, Input, Table} from "antd";

// const url = 'http://192.168.1.137:8088';
const url = 'http://duodao.chende.top';

export default class Ques_temp extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            visible: false,
            resultData: [],
    }
    }

    //查看按钮
    showModal = (i) => {
        const item = this.state.data[i];
        console.log("item:",item);
        this.setState({
            visible: true,
            resultData: item,
        })
    }
    //控制modal的显示与隐藏
    handleOk = () => {
        this.setState({
            visible: false,
        })
    }
    handleCancel = () => {
        this.setState({
            visible: false,
        })
    }
    // 初始化获取数据
    componentDidMount = () => {
        fetch(url+'/quetemplate/all ',{
            method: 'GET',
            headers: {
                'Content-Type' : 'application/json'
            }
        })
        .then((res) => {
            return res.json();
        })
        .then(res => {
            const data = res.data;
            console.log(res);
            this.setState({
                data: data
            })
        })
        .catch(err => {
            console.log(err);
        })
    }

    render() {
        // 表头
        const column = [
            {
                title: '问卷名称',
                dataIndex: 'WJMC',
            },
            {
                title: '创建人',
                dataIndex: 'CJR',
            },
            {
                title: '生效时间',
                dataIndex: 'SXSJ',
            },
            {
                title: '失效时间',
                dataIndex: 'SXSJ',
            },
            {
                title: '状态',
                dataIndex: 'ZT',
            },
            {
                title: '操作',
                dataIndex: 'CZ',
            },
        ]
        //表格数据填写
        const datas = [];
        const dataItem = this.state.data
        const len = dataItem.length;
        for(let i = 0; i < len; i++){
            datas.push({
                WJMC: dataItem[i].name,
                CJR: dataItem[i].creator,
                SXSJ: dataItem[i].expiredTime,
                SXSJ: dataItem[i].lastUpdatedTime,     
                ZT: dataItem[i].status,
                CZ: <span>
                     <Button type="primary"  onClick = {() => this.showModal(i)} >查看问卷</Button>
                </span>
            })
        }
        return (
            <div id="Ques_temp">
                <div className="col-md-12 col-sm-12">
                    <h2>问卷列表</h2>
                    <h4>您可以管理已经创建的问卷模板，或创建新的问卷模板。</h4>
                    <Table columns = {column} dataSource = {datas} 
                        pagination = {{
                            showSizeChanger : true,
                            defaultCurrent : 1,
                            defaultPageSize: 3,
                            total: len,
                            pageSizeOptions : ['4', '10', '30', '50'],//页数选择
                        }}
                />
                {/* 查看结果列表 */}
                <Modal
                title="问卷信息"
                visible={this.state.visible}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                height = '100%'
                >
                   <div>
                       <h3 style = {{textAlign: 'center'}}>{this.state.resultData.name}</h3>
                       <p><label>问卷描述:</label><span>{this.state.resultData.desciption}</span></p>
                       <p><label>创建人:</label><span>{this.state.resultData.creator}</span></p>
                       <p><label>更新时间:</label><span>{this.state.resultData.lastUpdatedTime}</span></p>
                       <p><label>生效时间:</label><span>{this.state.resultData.publishedTime}</span></p>
                       <p><label>失效时间:</label><span>{this.state.resultData.expiredTime}</span></p>
                       <p><label>状态:</label><span>{this.state.resultData.status}</span></p>
                    </div>
                </Modal>
                </div>
                </div>
                )
    }
}